<template>
  <view class="page ui-form-basic">
    <fui-form ref="formRef" :model="form" class="form-wrapper" labelWidth="200" labelSize="28" labelWeight="bold">
      <fui-form-item label="头像" prop="realName" left="0" marginTop="14" :padding="['16rpx', 0]">
        <upload-image class="form-upload" type="avatar" @uploaded="updateAvatar" :defaultList="form.avatar ? [form.avatar] : []"></upload-image>
      </fui-form-item>
      <fui-form-item label="真实姓名" prop="realName" left="0" marginTop="14" :padding="['16rpx', 0]">
        <fui-input :borderBottom="false" :padding="[0]" v-model="form.realName" size="28" disabled></fui-input>
      </fui-form-item>
      <fui-form-item label="身份证号" prop="idCard" left="0" marginTop="14" :padding="['16rpx', 0]">
        <fui-text :text="maskIdCardNumber(form.idCard)" size="28"></fui-text>
      </fui-form-item>
      <fui-form-item label="登录密码" prop="password" left="0" marginTop="14" :padding="['16rpx', 0]" :arrow="true">
        <fui-text style="display: block;" text="******" @click="tab.navigateTo(passwordLink)"></fui-text>
      </fui-form-item>
      <fui-form-item label="联系方式" prop="phone" left="0" marginTop="14" :padding="['16rpx', 0]" :arrow="true">
        <fui-text style="display: block;" :text="maskPhoneNumber(form.phone)" size="28" @click="tab.navigateTo(phoneLink)"></fui-text>
        <!-- <template v-slot:right>
          <fui-button class="ui-btn-primary_plain" text="更换电话" width="120rpx" height="46rpx" radius="8rpx" :size="24" @click="tab.navigateTo(phoneLink)"></fui-button>
        </template> -->
      </fui-form-item>
    </fui-form>
    <fui-button v-if="tenantList.length > 1" text="切换供应链" height="78rpx" borderColor="#376dfe" background="#fff" color="#376dfe" radius="8rpx" :margin="['24rpx', '0']" @click="tab.navigateTo(tenantLink)"></fui-button>
    <fui-button text="退出登录" height="78rpx" radius="8rpx" :margin="['24rpx', '0']" @click="handleExit"></fui-button>
    <fui-button text="注销账号" height="78rpx" borderColor="#fc5353" background="#fff" color="#fc5353" radius="8rpx" :margin="['24rpx', '0']" @click="handleLogOff"></fui-button>
  </view>
</template>

<script setup>
import { ref, computed, inject } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { useStore } from 'vuex'
import uploadImage from '@/components/upload/image'
import userApi from '@/api/user'
import staffApi from '@/api/staff'
import { maskPhoneNumber, maskIdCardNumber } from '@/utils/tools'

const store = useStore()
const tab = inject('$tab')
const modal = inject('$modal')
const auth = inject('$auth')

const passwordLink = '/pages/user/password?type=change'
const phoneLink = '/pages/user/phone'
const tenantLink = '/pages/user/tenant'

// 获取用户信息
const profileApiUrl = computed(() => {
  return store.getters.userType === '1' ? 'getSupplyProfile' : 'getSupplierProfile'
})
let form = ref({})
const getUserProfile = () => {
  userApi[profileApiUrl.value](store.getters.userId).then((res) => {
    if (res.code === 0 && res.data) {
      if (store.getters.userType === '1') { // 供应链
        form.value = {
          realName: res.data.nickname,
          idCard: res.data.idCard,
          phone: res.data.mobile,
          avatar: res.data.avatar
        }
      } else { // 供应商
        form.value = {
          realName: res.data.name,
          idCard: res.data.idCardNum,
          phone: res.data.phone,
          avatar: res.data.avator
        }
      }
    } else {
      modal.msgError('获取用户信息失败！')
    }
  }).catch(err => {
    modal.msgError('获取用户信息失败！')
  })
}

// 获取当前租户列表
const tenantList = computed(() => store.getters.tenantList)
store.dispatch('GetTenantList')

onShow(() => {
  getUserProfile()
})

// 上传头像
const updateAvatar = (urls) => {
  form.value.avatar = urls.length ? urls[0] : ''
  if (!urls.length) {
    return
  }
  userApi.updateAvatar({
    id: store.getters.userId + '',
    avatar: urls[0]
  }).then(res => {
    if (res.code === 0) {
      modal.msg('头像已修改！')
      getUserProfile()
      store.dispatch('GetUserInfo')
    } else {
      modal.msg('头像修改失败！')
    }
  })
}

const handleExit = () => {
  modal.confirm('确认退出？').then(() => {
    store.dispatch('LogOut')
  })
}

const handleLogOff = () => {
  if (auth.hasRoleOr(['scm_gyl_yyjl', 'scm_gysfzr'])) {
    modal.msgError('请联系管理员移交负责人权限后再申请注销！')
    return
  }
  modal.confirm('确认注销当前账号？').then(async () => {
    try {
      await store.dispatch('LogOff')
      modal.msg('账号已注销！')
      setTimeout(() => {
        tab.reLaunch('/pages/login')
      }, 1000)
    } catch (err) {
      modal.msg(err.msg || err || '账号注销失败！')
    }
  })
}
</script>

<style lang="scss" scoped>
@import "@/static/scss/form.scss";
</style>
